import React, {PropsWithChildren, useMemo} from 'react'
import {Button, Cell, CellGroup} from "@nutui/nutui-react-taro";
import Taro, {useLoad} from "@tarojs/taro";
import {getGoodsDetail} from "../apis/GoodsApi"
import CopyableCell from "../components/CopyableCell";
import MyNavigationBar from "../components/MyNavigationBar";
import employeeStore from "../store/EmployeeStore";
import {View} from "@tarojs/components";
import styles from "./goodsDetail.module.sass"
import {goodsPageStackStore} from "../store/GoodsPageStackStore";
import {observer} from "mobx-react";

export interface GoodsDetailProps extends PropsWithChildren {

}

const GoodsDetail: React.FC<GoodsDetailProps> = ({}) => {
    useLoad(params => {
        let id = Number(params.id);
        getGoodsDetail(id).then(response => {
            goodsPageStackStore.setDetail(response.data)
        })
    })

    function copyableCell(title: string, value: string) {
        return <CopyableCell title={title} value={value}/>
    }

    const basicUnit = useMemo(() => {
        return goodsPageStackStore.detail?.units?.find(it => it.basicMultiple === 0)
    }, [goodsPageStackStore.detail]);
    const data = goodsPageStackStore.detail
    return <>
        <MyNavigationBar>商品详情</MyNavigationBar>
        {!!data ? <>
            <CellGroup divider={false}>
                {copyableCell("名称", data.name)}
                {copyableCell("条码", data.barcode)}
                {copyableCell("零售价", data.price.toString())}
                {copyableCell("箱规", data.boxSpecification?.toString()!)}
            </CellGroup>
            <CellGroup divider={false}>
                {data.brand && copyableCell("品牌", data.brand.name)}
                {data.category && copyableCell("类型", data.category.name)}
                {data.factory && copyableCell("厂商", data.factory.name)}
            </CellGroup>
            {!!basicUnit && <CellGroup divider={false}>
                <Cell title={"单位"} extra={basicUnit.name}/>
                {data.units.filter(it => it.basicMultiple !== 0).map(it => {
                    return <Cell extra={`1${basicUnit.name}=${it.basicMultiple}${it.name}`}/>
                })}
            </CellGroup>}
            <CellGroup divider={false}>
                {data.recordFilingNumber && copyableCell("备案编号", data.recordFilingNumber)}
                {data.registrationCertificateNumber && copyableCell("注册证编号", data.registrationCertificateNumber)}
                {data.executiveStandard && copyableCell("执行标准", data.executiveStandard)}
            </CellGroup>
            {!!data.subGoodsList.length && <CellGroup divider={false} title={"子商品"}>
                {data.subGoodsList.map(o => <Cell title={o.name} extra={o.amount} description={`库存${o.number}`}/>)}
            </CellGroup>}
            <View className={styles.actions}>
                {employeeStore.hasAuthority("货品_修改")&&<Button block onClick={()=>{
                    Taro.navigateTo({
                        url:`/pages/goodsEdit?id=${data?.id}`
                    })
                }}>编辑</Button>}
            </View>
        </> : <></>}
    </>
}

export default observer(GoodsDetail)


